<template>
	<view class="describe">
		<navBar title="修复措施"></navBar>
		<view class="box">
			<u-search v-model="searchText" :clearabled="false" :showAction="false" placeholder="请输入关键字" height="44" 
				@search="determine" @clear="clearKeyword" @change="determine"></u-search>
		</view>
		
			<view class="table-container">
				<view class="top_header">
					<view class="h-num">序号</view>
					<view class="h-code">物料编码</view>
					<view class="h-desc">物料描述</view>
				</view>
				<scroll-view scroll-y="true"
					:style="{height:`calc(100vh - ${ boxHeight.searchH + boxHeight.tableH}px)`}">
					<view class="content-box" v-for="(it,i) in list" :key="i" :class="i%2 === 0 ? '' : 'color-grid'" @click="choose(it)">
						<view class="num">
							<text>{{i+1}}</text>
						</view>
						<view class="code">{{it.code}}</view>
						<view class="desc">{{it.makt}}</view>
					</view>
				</scroll-view>
			</view>
		
	</view>
</template>

<script>
	import {doGet} from "@/utils/offline/sqlite/index.js"
	import * as XUNJIAN from '@/api/engineeringMaintenance/engineeringMaintenance.js'
	export default {
		name: 'common-table',
		data() {
			return {
				searchText: "",
				list: [],
				// 几个盒子的高度,计算scroll-view的高度
				boxHeight: {
					navBarH: 40,
					searchH: 40,
					tableH:20
				},
			}
		},
		mounted() {
			// 计算scorll-view的高度 , 用100vh减去几个不滚动盒子的高度
			const query = uni.createSelectorQuery().in(this);
			query.select('.box').boundingClientRect(data => {
				this.boxHeight.searchH = data.height
			}).exec();
			query.select('.top_header').boundingClientRect(data => {
				this.boxHeight.tableH = data.height
			}).exec();
			this.describe()
		},
		methods: {
			determine(ev) {
				console.log(ev)
				if(!ev){
					this.searchText = null
				}
				this.describe()
			},
			clearKeyword() {
				this.searchText = null
				this.describe()
			},
			choose(e) {
				const eventChannel = this.getOpenerEventChannel();
				uni.navigateBack({
					success: () => {
						eventChannel.emit('setData', {
							data: e
						});
					}
				});
			},
			// 物料描述
			describe() {
				let param = {
					currPage: 1,
					pageSize: 9999,
					params: {
						projectId: uni.getStorageSync('isOwner'),
						queryStr: this.searchText
					}
				}
				// diseaseMaterialList(param)
				doGet(XUNJIAN.diseaseMaterialList, param)
				.then(res => {
					if (res.status === 1 && res.success) {
						this.list = res.result.list
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.describe {
		/* #ifdef MP-WEIXIN */
			padding-top: 190rpx;
		/* #endif */
		.box {
			// padding: 0 30rpx;
			padding: 42rpx 30rpx 0 30rpx;
		}
		.table-container {
			margin-top: 20rpx;
		}
		.top_header {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			padding:10rpx 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			.h-num {
				width: 100rpx;
			}
			.h-code {
				width: 200rpx;
				text-align: center;
			}
			.h-desc {
				width: 500rpx;
				text-align: center;
			}
		}
		.content-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			padding-right: 10rpx;
			border-top: 1rpx dashed #f0f0f0;
			.num {
				width: 130rpx;
				text-align: center;
				text {
					display: inline-block;
					width: 36rpx;
					height:36rpx;
					line-height: 36rpx;
					text-align: center;
					background-color:#a9c0df ;
					color: white;
				}
			}
			.code {
				width: 200rpx;
				word-wrap: break-word
				// text-align: center;
			}
			.desc {
				width: 500rpx;
				padding-left: 20rpx;
				// text-align: center;
				// text-overflow: -o-ellipsis-lastline;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-line-clamp: 2;
				// line-clamp: 2;
				// -webkit-box-orient: vertical;
			}
		}
		.color-grid {
			background: #F5F7FA;
		}
	}
</style>
